<!--
 * @Author: 郭安东
 * @Date: 2021-03-12 15:25:36
 * @LastEditTime: 2021-04-12 14:55:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \test\src\views\home\home.vue
-->
<template>
  <div class="home">
    <img src="../../assets/bk2.png" class="imgTitle">
    <el-card class="box-card">
      <el-link class="userName">欢迎使用本系统，{{ userName }}</el-link>
      <el-tag :type="statesType" style="margin-left: 30px">{{ states }}</el-tag>
      <span>
        <el-button class="loginOut-btn" @click="dialog = true"><i class="el-icon-switch-button"></i></el-button>
      </span>
    </el-card>
    <el-card class="box-card-show">
      <div class="ulBox">
        <ul>
          <li class="ulLi">地区：<span class="liSpan">{{form.place}}</span></li>
          <li class="ulLi">境外输入：<span class="liSpan">{{form.abroad}}</span></li>
          <li class="ulLi">无症状：<span class="liSpan">{{form.asymptomatic}}</span></li>
          <li class="ulLi">累计治愈：<span class="liSpan">{{form.countCure}}</span></li>
          <li class="ulLi">累计死亡：<span class="liSpan">{{form.countDeath}}</span></li>
          <li class="ulLi">累计确诊：<span class="liSpan">{{form.countDiagnosis}}</span></li>
          <!-- <li class="ulLi">更新日期：<span class="liSpan">{{form.date}}</span></li> -->
          <li class="ulLi">现有确诊：<span class="liSpan">{{form.exitDiagnosis}}</span></li>
          <li class="ulLi">现有重症：<span class="liSpan">{{form.exitSevere}}</span></li>
          <li class="ulLi">现有疑似：<span class="liSpan">{{form.exitSuspected}}</span></li>
        </ul>
      </div>
    </el-card>
    <div class="modeGroup">
      <el-row :gutter="20" class="modeBox">
        <el-col :span="6" class="functionBox"><el-button class="mode" plain><router-link to="temperature" class="link">体温管理</router-link></el-button></el-col>
        <el-col :span="6" class="functionBox"><el-button class="mode" plain><router-link to="out" class="link">外出记录管理</router-link></el-button></el-col>
        <el-col :span="6" class="functionBox"><el-button class="mode" plain><router-link to="trip" class="link">行程管理</router-link></el-button></el-col>
      </el-row>
      <el-row :gutter="20" class="modeBox">
        <!-- v-show 根据用户权限 展示功能页面 -->
        <el-col :span="6" class="functionBox"><el-button class="mode" plain v-show="role === 'role_user'"><router-link to="update" class="link">用户个人管理</router-link></el-button></el-col>
        <el-col :span="6" class="functionBox"><el-button class="mode" plain v-show="role === 'role_admin'"><router-link to="address" class="link">社区和小区地址管理</router-link></el-button></el-col>
        <el-col :span="6" class="functionBox"><el-button class="mode" plain v-show="role === 'role_admin'"><router-link to="user" class="link">用户管理</router-link></el-button></el-col>
        <el-col :span="6" class="functionBox"><el-button class="mode" plain v-show="role === 'role_admin'"><router-link to="userAbnormal" class="link">异常用户管理</router-link></el-button></el-col>
      </el-row>
    </div>
    <el-dialog
      title="确定注销用户吗"
      :visible.sync="dialog"
      width="30%"
      center>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="loginOut()">确 定</el-button>
        <el-button @click="dialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { userLoginOut, getRealTimeData, getUserStates } from '../../api/apply-info'
export default {
  name: 'HomeIndex',
  data () {
    return {
      user: 1,
      userName: '',
      role: '',
      userId: '',
      states: '',
      statesType: '',
      dialog: false,
      time: '',
      form: {
        abroad: '',
        asymptomatic: '',
        countCure: '',
        countDeath: '',
        countDiagnosis: '',
        date: '',
        exitDiagnosis: '',
        exitSevere: '',
        exitSuspected: '',
        place: ''
      }
    }
  },
  mounted () {
    this.getUserName()
    this.getStates()
    this.getNowTime()
    this.getInfo()
  },
  methods: {
    // 获取userName
    getUserName () {
      this.userName = sessionStorage.getItem('userName')
      this.role = sessionStorage.getItem('role')
      this.userId = sessionStorage.getItem('userId')
    },
    getStates () {
      getUserStates(this.userId).then(res => {
        console.log('states', res)
        sessionStorage.setItem('states', res.data.data)
        this.states = sessionStorage.getItem('states')
        if (this.states === '状态正常' || this.states === '管理员') {
          this.statesType = 'success'
        } else {
          this.statesType = 'danger'
        }
      })
    },
    // 注销用户
    loginOut () {
      userLoginOut().then(res => {
        console.log('loginOut', res)
        this.dialog = false
        this.$message(res.data.message)
        // 将用户名放入sessionStorage
        sessionStorage.setItem('userName', null)
        sessionStorage.setItem('userId', null)
        sessionStorage.setItem('role', null)
        // 将用户放入vuex
        this.$store.dispatch('setUser', null)
        this.$router.push({ path: '/login' })
      })
    },
    // 获取当前日期
    getNowTime () {
      this.time = new Date().toLocaleDateString().replace(/\//g, '-')
    },
    // 获取实时数据
    getInfo () {
      getRealTimeData(this.time).then(res => {
        console.log('getRealTimeData res', res)
        this.form = res.data.data
      })
    }
  }
}
</script>
<style scoped>
.home{
  margin-left: 3%;
}
.imgTitle {
  margin-left: 26%;
}
.loginOut-btn{
  float: right;
  margin-top: -5px;
  border-radius: 10px;
  color: #7196b1;
  border: none;
  background-color: rgb(240, 234, 234, 0.6);
}
.modeGroup{
    margin-left: 10%;
}
.modeBox{
    margin-top: 20px;
}
.mode{
    display: block;
    width: 250px;
    height: 100px;
    border-radius: 20px;
    text-align: center;
    background: -webkit-linear-gradient(
    top,white,lightblue,skyblue
    );
    box-shadow: #7196b1 10px 10px 10px;
}
.mode:first-child{
    margin-left: 20%;
}
.box-card {
    margin-top: 10px;
    margin-left: 14%;
    width: 1000px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.8);
}
.box-card-show {
    margin-top: 10px;
    margin-left: 14%;
    width: 1000px;
    border-radius: 20px;
    height: 150px;
    background-color: rgba(255, 255, 255, 0.8);
}
.ulBox {
  margin-left: 14%;
  margin-top: -14px;
}
.ulLi {
  list-style: none;
  display: inline-block;
  width: 230px;
  float: left;
  text-align: left;
  height: 40px;
  font-size: 19px;
}
.liSpan {
  color: #305a74;
  font-size: 15px;
}
.userName{
  color: #7196b1;
  font-size: 16px;
  font-weight: bolder;
}
.link{
  color: #5d7e93;
  text-decoration: none;
  font-size: 20px;
}
</style>
<style>
body{
  background-image: url('../../assets/bg3.jpeg');
  background-size: 100% 1000px;
  background-repeat: no-repeat;
}
.el-icon-switch-button {
  color: #e4252d;
  font-size: 17px;
  font-weight: bolder;
}
</style>
